<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>练习5：DOM操作</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/style05.css">
</head>
<body>
<div id="cont_left">
    <ul><img src="img/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
        <ul id="menu1" style="display: none;">
            <li onclick="showImg()"><img src="img/doc.gif">获取原始图片路径</li>
            <li onclick="getFruit()"><img src="img/doc.gif">获取我喜欢的水果</li>
        </ul>
    </ul>
    <hr>

    <ul><img src="img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
        <ul id="menu2" style="display: none;">
            <li onclick="createImg()"><img src="img/doc.gif">创建图片</li>
            <li onclick="cloneImg()"><img src="img/doc.gif">克隆图片</li>
            <li onclick="changeImg()"><img src="img/doc.gif">改变图片</li>
            <li onclick="removeImg()"><img src="img/doc.gif">删除图片</li>
        </ul>
    </ul>
    <hr>

    <ul><img src="img/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
        <ul id="menu3" style="display: none;">
            <li onclick="changeCss1()"><img src="img/doc.gif">为原始图片加上行间样式</li>
            <li onclick="changeCss2()"><img src="img/doc.gif">为所有的fieldset加上内部样式</li>
        </ul>
    </ul>
    <hr>

</div>
<fieldset>
    <legend>原始图片</legend>
    <img id="fruit" src="img/fruit.jpg">
</fieldset>
<fieldset>
    <legend>图片路径</legend>
    <p id="msg1">在这里显示</p>
</fieldset>
<fieldset>
    <legend>选择你喜欢的水果</legend>
    <ul style="text-align: left;">
        <li>
            <input name="enjoy" type="checkbox" value="苹果"/>苹果
        </li>
        <li>
            <input name="enjoy" type="checkbox" value="香蕉" checked="checked"/>香蕉
        </li>
        <li>
            <input name="enjoy" type="checkbox" value="葡萄"/>葡萄
        </li>
        <li>
            <input name="enjoy" type="checkbox" value="梨" checked="checked"/>梨
        </li>
        <li>
            <input name="enjoy" type="checkbox" value="西瓜"/>西瓜
        </li>
    </ul>
    <div id="msg2" style="margin-top: 10px;text-align: left;"></div>
</fieldset>
<fieldset>
    <legend>创建图片</legend>
    <div id="msg3"></div>
</fieldset>
<fieldset>
    <legend>克隆图片</legend>
    <div id="msg4"></div>
</fieldset>
<script>
    //菜单收缩与扩展
    function show(title) {
        let currentMenu = document.getElementById(title);
        let currentStatus = currentMenu.style.display;
        let menu1 = document.getElementById("menu1");
        let menu2 = document.getElementById("menu2");
        let menu3 = document.getElementById("menu3");
        menu1.style.display = "none";
        menu2.style.display = "none";
        menu3.style.display = "none";
        currentMenu.style.display = currentStatus == "" ? "none" : "";
    }

    //获取原始图片路径
    function showImg() {
        let img = document.querySelector("#fruit");
        let msg1 = document.querySelector("#msg1");
        msg1.innerHTML = img.getAttribute("src");
    }

    //获取喜欢的水果
    function getFruit() {
        let enjoy = document.getElementsByName("enjoy");
        let msg2 = document.querySelector("#msg2");
        let fruitValue = [];
        for (let i = 0;i < enjoy.length; i ++) {
            if (enjoy[i].checked) {
                fruitValue.push(enjoy[i].getAttribute("value"));
            }
        }
        msg2.innerHTML = ("你喜欢的水果是:" + fruitValue);
    }

    //创建图片
    var uniq = 1;   //图片只能创建一次
    function createImg() {
        let msg3 = document.querySelector("#msg3");
        let img2 = document.createElement("img");
        // msg3.innerHTML = "<img id=\"fruit\" src=\"img/grape.jpg\">";
        img2.setAttribute("src","img/grape.jpg");
        if (uniq == 1) {
            msg3.appendChild(img2);
            uniq = 0;
        }
    }

    //克隆图片
    function cloneImg() {
        let msg4 = document.querySelector("#msg4");
        let img = document.querySelector("#fruit");
        let img3 = img.cloneNode();
        img3.id = "fruitClone";     //  点击"为原始图片加上行间样式"不会改变克隆体的样式
        msg4.appendChild(img3);     //  克隆1次后,删除原图片还可以克隆
    }

    //改变图片
    var orPic = 1;  //再次点击可变回原图片
    function changeImg() {
        let img = document.querySelector("#fruit");
        if (orPic == 1) {
            img.setAttribute("src","img/grape.jpg");
            orPic = 0;
        }else {
            img.setAttribute("src","img/fruit.jpg");
            orPic = 1;
        }
    }

    //删除图片
    function removeImg() {
        let img = document.querySelector("#fruit");
        img.remove();   //删除整个img标签，图片不可还原
        // img.setAttribute("src","");  //只清空图片的地址，可通过改变图片还原
    }

    //操作样式1
    function changeCss1() {
        let fieldsetElement = document.querySelectorAll("fieldset")[0];
        let img = document.querySelector("#fruit");
        fieldsetElement.style.boxShadow = "inset 0 0 30px #FF1493";
        img.style.borderRadius = "999999px";
    }

    //操作样式2
    function changeCss2() {
        let fieldsetElement = document.querySelectorAll("fieldset");
        for (let j = 0;j < fieldsetElement.length; j ++) {
            fieldsetElement[j].style.backgroundImage = "linear-gradient(90deg, #29bdd9 0%, #276ace 100%)";
        }
    }
</script>
</body>
</html>
